<template>
  <div class="file-card">
    <div
      class="file-card-preview"
      :class="getFilePreviewClass(file.type)"
      @click.stop="handlePreviewClick"
    >
      <!-- 图片类型显示缩略图 -->
      <div v-if="isImage && file.previewUrl" class="image-thumbnail">
        <img :src="file.previewUrl" :alt="file.name" />
        <div class="image-overlay">
          <Maximize2 :size="24" class="preview-icon" />
        </div>
      </div>
      <!-- 非图片类型显示图标 -->
      <div v-else class="file-type-icon">
        <component :is="getFileIcon(file.type)" :size="32" />
        <div class="file-extension">{{ getFileExtension(file.name) }}</div>
      </div>
    </div>
    <div class="file-card-info" @click="$emit('card-click', file)">
      <div class="file-card-name" :title="file.name">{{ file.name }}</div>
      <div class="file-card-details">
        <span class="file-card-size">{{ formatFileSize(file.size) }}</span>
        <span class="file-card-time">{{ formatMessageTime(file.date) }}</span>
      </div>
    </div>
    <div class="file-card-actions">
      <button class="action-btn" @click.stop="$emit('download', file)" title="下载">
        <Download :size="16" />
      </button>
      <button class="action-btn" @click.stop="$emit('delete', file)" title="删除">
        <Trash2 :size="16" />
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Maximize2, Download, Trash2 } from 'lucide-vue-next'
import { getFileIcon, getFileExtension, formatFileSize } from '@/utils/fileUtils'
import { formatMessageTime } from '@/utils/dateUtils'

const props = defineProps({
  file: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['card-click', 'download', 'delete', 'preview-image'])

// 判断是否为图片类型
const isImage = computed(() => props.file.type === 'image')

// 处理预览点击
const handlePreviewClick = () => {
  if (isImage.value && props.file.previewUrl) {
    // 图片使用内部预览组件
    emit('preview-image', props.file)
  } else {
    // 获取文件扩展名
    const fileExt = getFileExtension(props.file.name).toLowerCase()

    // 判断是否为可预览的文件类型
    const previewableTypes = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'txt', 'md']

    if (previewableTypes.includes(fileExt)) {
      // 检查是否在Electron环境中
      if (window.electron && typeof window.electron.openFilePreview === 'function') {
        // 创建一个简单的数据对象，只包含必要的属性
        const fileData = {
          id: props.file.id,
          name: props.file.name,
          type: props.file.type,
          size: props.file.size,
          // 使用本地测试文件
          path:
            fileExt === 'pdf'
              ? '/Users/lyc/Desktop/XLChat/src/renderer/src/assets/test-files/关于2025年应届高校毕业生一次性求职创业补贴的通知.pdf'
              : fileExt === 'xlsx'
                ? '/Users/lyc/Desktop/XLChat/src/renderer/src/assets/test-files/2026年应届困难毕业生一次性求职补贴申报花名册.xlsx'
                : fileExt === 'docx'
                  ? '/Users/lyc/Desktop/XLChat/src/renderer/src/assets/test-files/行测速解口诀卡1.docx'
                  : props.file.path,
          date: props.file.date ? props.file.date.toString() : null // 转换Date对象为字符串
        }
        // 调用外部预览窗口
        window.electron.openFilePreview(fileData)
      } else {
        // 在浏览器环境中，或者API不可用时，使用默认点击处理
        console.log('文件预览功能在浏览器环境中不可用')
        emit('card-click', props.file)
      }
    } else {
      // 其他文件类型使用默认点击处理
      emit('card-click', props.file)
    }
  }
}

// 获取文件预览类名
const getFilePreviewClass = (type: string): string => {
  return `preview-${type}`
}
</script>

<style scoped>
.file-card {
  display: flex;
  flex-direction: column;
  background-color: var(--theme-bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--theme-border-light);
  overflow: hidden;
  transition: all 0.2s ease;
  cursor: pointer;
  height: 220px;
}

.file-card:hover {
  border-color: var(--theme-primary);
  transform: translateY(-2px);
  box-shadow: var(--theme-shadow);
}

.file-card:hover .file-card-actions {
  opacity: 1;
}

.file-card-preview {
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--theme-bg-tertiary);
  color: var(--theme-text-secondary);
  position: relative;
  overflow: hidden;
}

/* 图片缩略图样式 */
.image-thumbnail {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.image-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.preview-icon {
  color: white;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

.image-thumbnail:hover img {
  transform: scale(1.05);
}

.image-thumbnail:hover .image-overlay {
  opacity: 1;
}

.file-type-icon {
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.file-extension {
  font-size: 12px;
  font-weight: 600;
  color: var(--theme-text-secondary);
  background-color: rgba(255, 255, 255, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
}

.preview-image {
  background-color: #f0f5ff;
  color: #3370ff;
}

.preview-video {
  background-color: #f5f0ff;
  color: #722ed1;
}

.preview-audio {
  background-color: #f0fff0;
  color: #52c41a;
}

.preview-document {
  background-color: #fff5f0;
  color: #fa541c;
}

.preview-archive {
  background-color: #f5f5f5;
  color: #595959;
}

.file-card-info {
  padding: 12px;
  flex: 1;
}

.file-card-name {
  font-weight: 500;
  color: var(--theme-text-primary);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-card-details {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--theme-text-tertiary);
}

.file-card-actions {
  display: flex;
  padding: 8px;
  border-top: 1px solid var(--theme-border-light);
  background-color: var(--theme-bg-primary);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border: none;
  border-radius: 4px;
  background-color: transparent;
  color: var(--theme-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background-color: var(--theme-bg-tertiary);
  color: var(--theme-primary);
}
</style>
